<template>
  <div class="app">
    <div class="content">
      <div  class="item" v-for="(item,index) in getHistory" :key="index" @click="show(item)">
        <div style="padding-left: 2px">
          <el-row :gutter="10">
            <el-col :span="6">
              <img :src="item.bookImg | url" alt="" style="height: 120px;border-radius: 10px">
            </el-col>
            <el-col :span="13">
              <div class="book-explain">
                <h2>{{item.bookName}}</h2>
                <div style="overflow:hidden;text-overflow: ellipsis;white-space: nowrap;">
                  <span>{{item.bookIntroduce}}</span>
                </div>
                <h5>{{item.bookAuthor}} · {{item.bookTotal}}万字 · 上次读到:{{item.bookStart}}</h5>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="item-arrow">
                <el-button @click.stop="joinBookShelf(item)" round v-if="!getBookshelf[item.bookName]"  icon="el-icon-plus">书架</el-button>
                <el-button v-else round @click.stop="delBookFromBookshelf(item)"  icon="el-icon-close">书架</el-button>
                <el-button type="danger" icon="el-icon-delete" circle @click.stop="delBookFromHistory(item)"></el-button>

              </div>
            </el-col>
          </el-row>
        </div>

      </div>

    </div>
    <el-dialog
        :visible.sync="dialogCode"
        width="600px"
        :append-to-body="true"
        center>
      <BookInfoComponent :key="new Date().getTime()" :book="currentBook"/>
      <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="read()">立即阅读</el-button>
            <el-button @click="dialogCode = false">取 消</el-button>
          </span>
    </el-dialog>

  </div>
</template>

<script>

import BookInfoComponent from "@/components/book/BookInfoComponent";
import {updateUser} from "@/utils/api";
export default {
  name: "HistoryComponent",
  components: {BookInfoComponent},
  props: {},
  data() {
    return {
      dialogCode: false,
      currentBook:Object
    }
  }, methods: {
    delBookFromBookshelf(item){
      delete this.$store.state.user.bookshelf[item.bookName];
      if(this.getBookshelf[item.bookName]=== undefined){
        this.$notify.success("已移除书架")
        this.$forceUpdate()
        this.updateUser()
      }else{
        this.$notify.error("删除失败")
      }

    },
    delBookFromHistory(item){
      delete this.$store.state.user.history[item.bookName];
      if(this.getHistory[item.bookName]=== undefined){
        this.$notify.success("删除成功")
        //强制刷新
        this.$forceUpdate()
        this.updateUser()
      }else{
        this.$notify.error("删除失败")
      }

    },
    joinBookShelf(item){
      this.getBookshelf = item
      if(this.getBookshelf[item.bookName]){
        this.$notify.success("加入书架成功")
        //强制刷新
        this.$forceUpdate()
        this.updateUser()
      }else{
        this.$notify.error("加入失败")
      }

    },
    read(){
      this.$router.push({name:"/ChapterPage",params:{book : this.currentBook}})
    },
    show(book){
      this.currentBook = book
      this.dialogCode = true
    },
    async updateUser(){
      var user = this.getUser;
      user.password=''
      updateUser(user).then(res=>{
        if(res.code !== 200){
          this.$notify.error("更新数据失败")
        }
      })
    },
  }, watch: {}, computed: {
    getBookshelf:{
      get(){
        return this.$store.getters.getUser.bookshelf;
      },
      set(value){
        let user=this.getUser;
        user.bookshelf[value.bookName]=value
        this.getUser = user;

      }
    },
    getHistory(){
      return this.getUser.history;
    },
    getUser:{
      get(){
        return this.$store.getters.getUser;
      },
      set(value){
        return this.$store.commit("setUser",value);
      }
    }
  },filters:{
    url(value){
      return 'api'+value;
    }
  }
}
</script>

<style scoped>
.app{
  width: 100%;
}
.content{
  width: 100%;
  padding-top: 1rem;
  /*height: 600px;*/
  display: grid;
  justify-content: space-evenly;
  grid-template-columns: repeat(auto-fill, 80%);
  grid-gap: 16px;
  overflow: hidden;
}
.item{
  padding: 0.5rem;
  line-height: 1rem;
  height: 120px;
  width: 100%;
  border-radius: 5px;
}
.item:hover{
  background-color: rgba(84, 76, 76, 0.1);
  /*transform: scale(1.2);*/
}
.book-explain{
  /*float: left;*/
  text-align:left;
}
.item-arrow{
  /*justify-content: space-evenly;*/
  line-height: 100px;
  padding-right: 0.5rem;
}
</style>